<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{overflow: hidden;}
        .box{width:250px;border: solid 1px black;float: left;text-align: center;}
        .box .img{width:90%;height:220px;}
        .box .name{line-height:20px;height:40px;overflow: hidden;}
        .box .oPrice{font-size: 12px;color: #999;text-decoration: line-through;}
        .box .nPrice{font-size: 20px;color: red;font-weight:bold;}
        .box .brand{width:60px;height:20px;}
        .box .tag{font-size:12px;}
        .box .addCart{margin-bottom: 20px;}

        .loading{position: fixed;top:0;bottom:0;left:0;right:0;background: rgba(200,200,200,0.6);display:none;}
        .loading img{width:200px;height:200px;position: absolute;top:0;bottom:0;left:0;right:0;margin: auto;}
    </style>
</head>
<body>
    <h2>这是商品列表页面</h2>
    <div class="loading">
        <img src="./loading.jpg" alt="">
    </div>
    <div class="cont"></div>
</body>
<script src="./ajax.js"></script>
<script>

    class List{
        constructor(){
            this.url = "http://localhost:3000/getGoods";
            this.cont = document.querySelector(".cont");
            this.loading = document.querySelector(".loading");

            this.getGoodsData();
        }
        getGoodsData(){
            const that = this;
            ajax({
                url: this.url,
                success(res){
                    that.loading.style.display = "none";
                    that.res = JSON.parse(res).data;
                    that.render()
                },
                beforeComplete(){
                    that.loading.style.display = "block";
                },
                error(){
                    that.loading.style.display = "none";
                }
            })
        }
        render(){
            let str = "";
            this.res.forEach(val=>{
                str += `<div class="box">
                <img class="img" src="${val.goodsImg}" alt="">
                <p class="name">${val.goodsName}</p>
                <p>原价：<span class="oPrice">${val.price}</span>，现价：<span class="nPrice">${(val.price * val.discount / 10).toFixed(2)}</span></p>
                <p><img class="brand" src="${val.logo}" alt=""><span class="tag">${val.kind}</span></p>
                <input goodsId="${val.goodsId}" type="button" value="加入购物车" class="addCart">
            </div>`
            })
            this.cont.innerHTML = str;
        }
    }
    new List;

















        
    
</script>
</html>